<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript" src="js/vue.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="./css/reset.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="./js/jquery-2.2.3.js"></script>
	<script src="./js/echarts.common.min.js"></script>
	<style type="text/css">
		#app {
		
		}
		#app .header-container{
			height: 50px; 
        	background-color:  #409EFF;
			padding: 0px 15px;
		}
		#app .header-container .title{
			line-height: 50px;
            color: #ffffff;
            text-align: left;
            font-weight: bold;
			display: inline-block;
		}
		#app .header-container .header-right{
			height: 50px;
			display: inline-block;
			float: right;
		}
		#app .header-container .header-right li{
			float: left;
			width: 50px;
			height: 50px;
			text-align: center;
			
		}
		#app .header-container .header-right li:hover{ 
			background-color: rgb(25, 132, 247)
		}
		#app .header-container .header-right li img{
			width: 20px;
			height: 20px;
			margin-top: 15px;
			cursor: pointer;
		}
		#devicestatus-container {
			text-align: left;
			margin: 20px auto;
			padding-bottom: 75px;
		}
		#devicestatus-container .status-infor-container {
			border-radius: 5px;
			border: 1px solid #909399;
			box-shadow: 2px 2px 3px #C0C4CC;
			padding: 20px 20px 0px;
			height: 160px;
		}

		#devicestatus-container .status-infor-container .deviceInfor {
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		#app .devicestatus-footer {
			width: 100%;
			height: 80px;
			background-color:#EBEEF5;  
			position: fixed;
			bottom: 0px;
			display: flex;
			justify-content: space-around;
		}
		#app .devicestatus-footer .devicestatus-footer-left,
		#app .devicestatus-footer .devicestatus-footer-right {
			width: 50%;
			height: 80px;
		}
		#app .devicestatus-footer .devicestatus-footer-right {
			display:  flex;
			padding-left: 10px;
			padding-right: 10px;
		}
		#app .devicestatus-footer .devicestatus-footer-right .memory-details{
			width: 75%;
			height: 80px;
		}
		#app .devicestatus-footer .devicestatus-footer-right .memory-details ul {
			border-left: 1px solid #DCDFE6;
			border-right: 1px solid #DCDFE6;
			height: 100%;
			padding-left: 5px;
			padding-right: 5px;
		}
		#app .devicestatus-footer .devicestatus-footer-right .memory-details ul li{
			float: left;
			width: 50%;
			height: 40px;
			text-align: center;
		
		}
	
		#app .devicestatus-footer .devicestatus-footer-right .memory-details ul li:nth-child(n+3){
			border-top: 1px solid #DCDFE6;
		} 
		#app .devicestatus-footer .devicestatus-footer-right .memory-details ul li .legend{
			display: inline-block;
			width: 10px;
			height: 10px;
		}
		#app .devicestatus-footer .devicestatus-footer-right .memory-details ul li .legend-color1{
			background-color: #409EFF;
		}
		#app .devicestatus-footer .devicestatus-footer-right .memory-details ul li .legend-color2{
			background-color: #67C23A;
		}
		#app .devicestatus-footer .devicestatus-footer-right .memory-details ul li .legend-color3{
			background-color: #F56C6C;
		}
		#app .devicestatus-footer .devicestatus-footer-right .memory-details ul li .legend-color4{
			background-color: #E6A23C;
		}
		#app .devicestatus-footer .devicestatus-footer-right .memory-details ul li label{
			line-height: 40px;
		}
		#app .devicestatus-footer .devicestatus-footer-right #memory-pie {
			width: 30%;
			height: 80px;
		}
		#app .el-dialog {
			border-radius: 5px;
		}
		
		#app .el-dialog .el-dialog__header{
			background-color:  #409EFF;
		}
		#app .el-dialog .el-dialog__header .el-dialog__headerbtn i,
		#app .el-dialog .el-dialog__header:hover .el-dialog__headerbtn i{
			color: #ffffff;
		}
		#app .el-dialog .el-dialog__header .dialog-title{
			font-weight: 400;
			color: #ffffff;
		}
		#app .el-dialog .el-dialog__body .dialog-body{
			
		} 
		#app .el-dialog .el-dialog__body .dialog-body .setParam1 .el-input{
			display: inline-block;
			width: 170px;
			vertical-align: super;
			margin-left: 10px;
		}
		#app .el-dialog .el-dialog__body .dialog-body .setParam1 .el-input input{
			height: 22px;
		}
		#app .el-dialog .el-dialog__body .dialog-body .setParam2 .el-input,
		#app .el-dialog .el-dialog__body .dialog-body .setParam3 .el-input{
			display: inline-block;
			width: 130px;
			margin-left: -10px;
		}
		#app .el-dialog .el-dialog__body .dialog-body .setParam2 .el-input input,
		#app .el-dialog .el-dialog__body .dialog-body .setParam3 .el-input input{
			height: 22px;
		}

		#app .el-dialog .el-dialog__body .dialog-body .fieldset-container{
			border: 1px solid #909399;
		    box-shadow:2px 2px 3px #C0C4CC;
		    padding: 10px 20px 0px ;
			border-radius: 5px;
			font-size: 12px;
		}
		.el-checkbox__label {
			font-size: 12px;
		}
		#app .el-dialog .el-dialog__body .dialog-body .fieldset-container legend{
			font-size: 12px
		}
		#app .el-dialog .el-dialog__footer{
			text-align: center;
		}
		@media screen and (min-width: 1200px) {
			#devicestatus-container .status-infor-container {
				font-size: 14px;
			}
			#devicestatus-container .status-infor-container .deviceInfor span {
				margin-left: 5px;
			}
			#app .devicestatus-footer .devicestatus-footer-right .memory-details ul li {
				font-size: 14px;
			}
		}

		@media screen and (min-width: 992px) and (max-width: 1200px) {
			#devicestatus-container .status-infor-container {
				font-size: 12px;
			}
			#devicestatus-container .status-infor-container .deviceInfor span {
				margin-left: 2px;
			}
			#app .devicestatus-footer .devicestatus-footer-right .memory-details ul li {
				font-size: 12px;
			}
		}

		@media screen and (min-width: 768px) and (max-width: 992px) {
			#devicestatus-container .status-infor-container {
				font-size: 10px;
			}
			#devicestatus-container .status-infor-container .deviceInfor span {
				margin-left: 1px;
			}
			#app .devicestatus-footer .devicestatus-footer-right .memory-details ul li {
				font-size: 10px;
			}
		}

		@media screen and (max-width: 768px) {
			#devicestatus-container .status-infor-container {
				font-size: 10px;
			}
			#devicestatus-container .status-infor-container .deviceInfor span {
				margin-left: 1px;
			}
			#app .devicestatus-footer .devicestatus-footer-right .memory-details ul li {
				font-size: 10px;
			}
		}
		
		.file {
			position: relative;
			display: inline-block;
			background: #D0EEFF;
			border: 1px solid #99D3F5;
			border-radius: 4px;
			padding: 4px 12px;
			overflow: hidden;
			color: #1E88C7;
			text-decoration: none;
			text-indent: 0;
			line-height: 12px;
			margin-left: 5px;
		}
		.file input {
			position: absolute;
			font-size: 100px;
			right: 0;
			top: 0;
			opacity: 0;
		}
		.file:hover {
			background: #AADFFD;
			border-color: #78C3F3;
			color: #004974;
			text-decoration: none;
		}
		.selectDisk .el-table td, .el-table th{
			padding-top:2px;
			padding-bottom: 2px;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="header-container">
			<h3 class="title">执法记录仪采集系统</h3>
			<div class="header-right">
				<ul>
					<li><a href="./medias.html"><img src="./img/computer.png" @click="dropBtn"/></a></li>
					<li><img src="./img/setting.png" @click="setBtn"/></li>
					<li><img src="./img/getout.png" @click="dropBtn"/></li>
				</ul>
			</div>
		</div>
		<div id="devicestatus-container">
			<el-row :gutter="10">
				<!-- F -->
				<el-col :md="6" :sm="8" :xs="12"  style="margin-top:15px">
					<div class="status-infor-container">
						<el-row :gutter="20">
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforF.jybh">
									警号:
									<span>{{deviceInforF.jybh}}</span>
								</p>
							</el-col>
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforF.jy_xm">
									姓名:
									<span >{{deviceInforF.jy_xm}}</span>
								</p>
							</el-col>
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforF.jgdm">
									单位编号:
									<span >{{deviceInforF.jgdm}}</span>
								</p>
							</el-col>
						</el-row>
						<el-row :gutter="20" style="margin-top:20px">
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforF.cpxh">
									产品序号:
									<span >{{deviceInforF.cpxh}}</span>
								</p>
							</el-col>
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforF.productNub">
									产品型号:
									<span>{{deviceInforF.productNub}}</span>
								</p>
							</el-col>
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforF.wlwz">
									保存路径:
									<span>{{deviceInforF.wlwz}}</span>
								</p>
							</el-col>
						</el-row>
						<el-row :gutter="20" style="margin-top:20px">
							<el-col :span="24">
								<p class="deviceInfor" >
									上传时间:
									<span :title="deviceInforF.uploadTime">{{deviceInforF.scsj}}</span>
								</p>
							</el-col>
						</el-row>
						<div v-if="deviceInforF.isDisplayProgress"  style="margin-top:20px;margin-bottom:20px">
							<el-progress :text-inside="true" :stroke-width="18" :percentage="deviceInforF.copySpeed" status="success"></el-progress>
						</div>
					</div>
				</el-col>
				<!-- G -->
				<el-col :md="6" :sm="8" :xs="12"  style="margin-top:15px">
					<div class="status-infor-container">
						<el-row :gutter="20">
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforG.jybh">
									警号:
									<span>{{deviceInforG.jybh}}</span>
								</p>
							</el-col>
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforG.jy_xm">
									姓名:
									<span >{{deviceInforG.jy_xm}}</span>
								</p>
							</el-col>
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforG.jgdm">
									单位编号:
									<span >{{deviceInforG.jgdm}}</span>
								</p>
							</el-col>
						</el-row>
						<el-row :gutter="20" style="margin-top:20px">
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforG.cpxh">
									产品序号:
									<span >{{deviceInforG.cpxh}}</span>
								</p>
							</el-col>
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforG.productNub">
									产品型号:
									<span>{{deviceInforG.productNub}}</span>
								</p>
							</el-col>
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforG.wlwz">
									保存路径:
									<span>{{deviceInforG.wlwz}}</span>
								</p>
							</el-col>
						</el-row>
						<el-row :gutter="20" style="margin-top:20px">
							<el-col :span="24">
								<p class="deviceInfor" >
									上传时间:
									<span :title="deviceInforF.uploadTime">{{deviceInforG.scsj}}</span>
								</p>
							</el-col>
						</el-row>
						<div v-if="deviceInforG.isDisplayProgress"  style="margin-top:20px;margin-bottom:20px">
							<el-progress :text-inside="true" :stroke-width="18" :percentage="deviceInforG.copySpeed" status="success"></el-progress>
						</div>
					</div>
				</el-col>
				<!-- H -->
				<el-col :md="6" :sm="8" :xs="12"  style="margin-top:15px">
					<div class="status-infor-container">
						<el-row :gutter="20">
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforH.jybh">
									警号:
									<span>{{deviceInforH.jybh}}</span>
								</p>
							</el-col>
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforH.jy_xm">
									姓名:
									<span >{{deviceInforH.jy_xm}}</span>
								</p>
							</el-col>
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforH.jgdm">
									单位编号:
									<span >{{deviceInforH.jgdm}}</span>
								</p>
							</el-col>
						</el-row>
						<el-row :gutter="20" style="margin-top:20px">
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforH.cpxh">
									产品序号:
									<span >{{deviceInforH.cpxh}}</span>
								</p>
							</el-col>
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforH.productNub">
									产品型号:
									<span>{{deviceInforH.productNub}}</span>
								</p>
							</el-col>
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforH.wlwz">
									保存路径:
									<span>{{deviceInforH.wlwz}}</span>
								</p>
							</el-col>
						</el-row>
						<el-row :gutter="20" style="margin-top:20px">
							<el-col :span="24">
								<p class="deviceInfor" >
									上传时间:
									<span :title="deviceInforH.uploadTime">{{deviceInforH.scsj}}</span>
								</p>
							</el-col>
						</el-row>
						<div v-if="deviceInforH.isDisplayProgress"  style="margin-top:20px;margin-bottom:20px">
							<el-progress :text-inside="true" :stroke-width="18" :percentage="deviceInforH.copySpeed" status="success"></el-progress>
						</div>
					</div>
				</el-col>
				<!-- I -->
				<el-col :md="6" :sm="8" :xs="12"  style="margin-top:15px">
					<div class="status-infor-container">
						<el-row :gutter="20">
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforI.jybh">
									警号:
									<span>{{deviceInforI.jybh}}</span>
								</p>
							</el-col>
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforI.jy_xm">
									姓名:
									<span >{{deviceInforI.jy_xm}}</span>
								</p>
							</el-col>
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforI.jgdm">
									单位编号:
									<span >{{deviceInforI.jgdm}}</span>
								</p>
							</el-col>
						</el-row>
						<el-row :gutter="20" style="margin-top:20px">
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforI.cpxh">
									产品序号:
									<span >{{deviceInforH.cpxh}}</span>
								</p>
							</el-col>
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforI.productNub">
									产品型号:
									<span>{{deviceInforI.productNub}}</span>
								</p>
							</el-col>
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforI.wlwz">
									保存路径:
									<span>{{deviceInforI.wlwz}}</span>
								</p>
							</el-col>
						</el-row>
						<el-row :gutter="20" style="margin-top:20px">
							<el-col :span="24">
								<p class="deviceInfor" >
									上传时间:
									<span :title="deviceInforI.uploadTime">{{deviceInforI.scsj}}</span>
								</p>
							</el-col>
						</el-row>
						<div v-if="deviceInforI.isDisplayProgress"  style="margin-top:20px;margin-bottom:20px">
							<el-progress :text-inside="true" :stroke-width="18" :percentage="deviceInforI.copySpeed" status="success"></el-progress>
						</div>
					</div>
				</el-col>
				<!-- J -->
				<el-col :md="6" :sm="8" :xs="12"  style="margin-top:15px">
					<div class="status-infor-container">
						<el-row :gutter="20">
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforJ.jybh">
									警号:
									<span>{{deviceInforJ.jybh}}</span>
								</p>
							</el-col>
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforJ.jy_xm">
									姓名:
									<span >{{deviceInforJ.jy_xm}}</span>
								</p>
							</el-col>
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforJ.jgdm">
									单位编号:
									<span >{{deviceInforJ.jgdm}}</span>
								</p>
							</el-col>
						</el-row>
						<el-row :gutter="20" style="margin-top:20px">
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforJ.cpxh">
									产品序号:
									<span >{{deviceInforJ.cpxh}}</span>
								</p>
							</el-col>
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforJ.productNub">
									产品型号:
									<span>{{deviceInforJ.productNub}}</span>
								</p>
							</el-col>
							<el-col :span="8">
								<p class="deviceInfor" :title="deviceInforJ.wlwz">
									保存路径:
									<span>{{deviceInforJ.wlwz}}</span>
								</p>
							</el-col>
						</el-row>
						<el-row :gutter="20" style="margin-top:20px">
							<el-col :span="24">
								<p class="deviceInfor" >
									上传时间:
									<span :title="deviceInforJ.uploadTime">{{deviceInforJ.scsj}}</span>
								</p>
							</el-col>
						</el-row>
						<div v-if="deviceInforJ.isDisplayProgress"  style="margin-top:20px;margin-bottom:20px">
							<el-progress :text-inside="true" :stroke-width="18" :percentage="deviceInforJ.copySpeed" status="success"></el-progress>
						</div>
					</div>
				</el-col>
				<!-- K -->
				<el-col :md="6" :sm="8" :xs="12"  style="margin-top:15px">
						<div class="status-infor-container">
							<el-row :gutter="20">
								<el-col :span="8">
									<p class="deviceInfor" :title="deviceInforK.jybh">
										警号:
										<span>{{deviceInforK.jybh}}</span>
									</p>
								</el-col>
								<el-col :span="8">
									<p class="deviceInfor" :title="deviceInforK.jy_xm">
										姓名:
										<span >{{deviceInforK.jy_xm}}</span>
									</p>
								</el-col>
								<el-col :span="8">
									<p class="deviceInfor" :title="deviceInforK.jgdm">
										单位编号:
										<span >{{deviceInforK.jgdm}}</span>
									</p>
								</el-col>
							</el-row>
							<el-row :gutter="20" style="margin-top:20px">
								<el-col :span="8">
									<p class="deviceInfor" :title="deviceInforK.cpxh">
										产品序号:
										<span >{{deviceInforK.cpxh}}</span>
									</p>
								</el-col>
								<el-col :span="8">
									<p class="deviceInfor" :title="deviceInforK.productNub">
										产品型号:
										<span>{{deviceInforK.productNub}}</span>
									</p>
								</el-col>
								<el-col :span="8">
									<p class="deviceInfor" :title="deviceInforK.wlwz">
										保存路径:
										<span>{{deviceInforK.wlwz}}</span>
									</p>
								</el-col>
							</el-row>
							<el-row :gutter="20" style="margin-top:20px">
								<el-col :span="24">
									<p class="deviceInfor" >
										上传时间:
										<span :title="deviceInforK.uploadTime">{{deviceInforK.scsj}}</span>
									</p>
								</el-col>
							</el-row>
							<div v-if="deviceInforK.isDisplayProgress"  style="margin-top:20px;margin-bottom:20px">
								<el-progress :text-inside="true" :stroke-width="18" :percentage="deviceInforK.copySpeed" status="success"></el-progress>
							</div>
						</div>
					</el-col>
			</el-row>
		</div>
		<div class="devicestatus-footer">
			<div class="devicestatus-footer-left">

			</div>
			<div class="devicestatus-footer-right">
				<div class="memory-details">
					<ul>
						<li>
							<span class="legend legend-color1"></span>
							<label>磁盘总量:<span>{{diskTotal + "G"}}</span></label>
						</li>
						<li>
							<span class="legend legend-color2"></span>
							<label>可用空间:<span>{{diskfreeTotal + "G"}}</span></label>
						</li>
						<li>
							<span class="legend legend-color3"></span>
							<label>已用空间:<span>{{diskUseTotal + "G"}}</span></label>
						</li>
						<li>
							<span class="legend legend-color4"></span>
							<label>已用百分比:<span>{{usePercentage}}</span></label>
						</li>
					</ul>
				</div>
				<div id="memory-pie"></div>
			</div>
		</div>
		<el-dialog :visible.sync="siteDialogVisible" width="60%" :before-close="handleClose">
			<span slot="title" class="dialog-title">
				参数设置
			</span>
			<div class="dialog-body">
				<fieldset class="fieldset-container setParam1">
					<legend>媒体文件管理策略</legend>
					<div>
						<el-radio v-model="localStorageRadio" label="存储本机" style="vertical-align: super;">存储本机</el-radio>
						<el-input v-model="localStorageStr" :disabled="true"></el-input>
						<a href="javascript:;" class="file" @click="openFile">打开文件夹
							<!-- <input type="file" name=""  ref="file" @change="openFile" webkitdirectory mozdirectory msdirectory odirectory directory multiple> -->
						</a>
					</div>
					<div style="margin-top:10px;margin-bottom:10px;">
						<el-checkbox v-model="Cloudser" >启用云管理服务</el-checkbox>
  						<el-checkbox v-model="autoClearFile" >自动清除过期文件</el-checkbox>
					</div>
				</fieldset>
				<fieldset class="fieldset-container setParam2">
					<legend>系列号</legend>
					<el-row style="margin-bottom:10px;">
						<el-col :span="12">
							识别码：
							<el-input v-model="pinCode"></el-input>
						</el-col>
						<el-col :span="12">
							序列号：
							<el-input v-model="serialNumb"></el-input>
						</el-col>
					</el-row>
				</fieldset>
				<fieldset class="fieldset-container setParam3">
					<legend>采集站管理设置</legend>
					<el-row style="margin-bottom:10px;">
						<el-col :span="12">
							管理密码：
							<el-input v-model="adminPassword"></el-input>
						</el-col>
						<el-col :span="12" style="padding-left:10px">
							<el-checkbox v-model="cleanZfjlyFile" >清除已被采集的文件</el-checkbox>
						</el-col>
					</el-row>
				</fieldset>
				<fieldset class="fieldset-container">
					<legend>上传文件类型</legend>
					<el-row style="margin-bottom:10px;" :gutter="5">
						<el-col :span="6">
							<el-checkbox v-model="fileType" >**(任何类型)</el-checkbox>
							<el-checkbox v-model="videoThumbnail" style="margin-left:0px;">视频缩略图</el-checkbox>
						</el-col>
						<el-col :span="6">
							<fieldset class="fieldset-container" style="padding:5px;">
								<legend>视频</legend>
								<ul>
									<li>*avi</li>
									<li>*mp4</li>
									<li>*wmv</li>
									<li>*mov</li>
									<li>*flv</li>
								</ul>
							</fieldset>
						</el-col>
						<el-col :span="6">
							<fieldset class="fieldset-container" style="padding:5px;">
								<legend>音频</legend>
								<ul>
									<li>*mp3</li>
									<li>*wav</li>
								</ul>
							</fieldset>
						</el-col>
						<el-col :span="6" >
							<fieldset class="fieldset-container" style="padding:5px;">
								<legend>图片</legend>
								<ul>
									<li>*jpg</li>
									<li>*bmp</li>
									<li>*pnp</li>
								</ul>
							</fieldset>
						</el-col>
					</el-row>
				</fieldset>
			</div>
			<span slot="footer" class="dialog-footer">
			  <el-button @click="siteDialogVisible = false" size="mini">取 消</el-button>
			  <el-button type="primary" @click="siteDialogBtnOK" size="mini">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog :visible.sync="hardDiskDialog" width="70%" :before-close="hardDiskClose" class="selectDisk">
			<span slot="title" class="dialog-title">
				选择存储磁盘
			</span>
			<div class="dialog-body" style="margin-left:-5px;margin-right:-5px;">
				<el-table
					ref="hardDiskTable"
					:data="hardDiskList"
					highlight-current-row
					@current-change="hardDiskCurrentChange"
					border
					style="width: 100%">
					<el-table-column
						type="index"
						align="center">
					</el-table-column>
					<el-table-column
						prop="driveLetter"
						label="磁盘"
						align="center">
					</el-table-column>
					<el-table-column
						prop="totalCapacity"
						label="总容量"
						align="center">
					</el-table-column>
					<el-table-column
						prop="usedSpace"
						label="已用空间"
						align="center">
					</el-table-column>
					<el-table-column
						prop="remainSpace"
						label="剩余空间"
						align="center">
					</el-table-column>
					<el-table-column
						prop="usage"
						label="使用率"
						align="center">
					</el-table-column>
				</el-table>
			</div>
			<span slot="footer" class="dialog-footer">
			  <el-button @click="hardDiskDialog = false" size="mini" ref="kk">取 消</el-button>
			  <el-button type="primary" @click="hardDiskBtn" size="mini">确 定</el-button>
			</span>
		</el-dialog>
	</div>
	<script src="./js/nwShowTools.js"></script>
	<script src="./js/textFormat.js"></script>
	<script src="./js/zfjly.js"></script>
	<script src="./js/hardDisk.js"></script>
	<script src="./js/copyFile.js"></script>
	<script src="./js/mongo.js"></script>
	<!-- <script src="./test1.js"></script> -->
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data() {
				return {
					deviceInforF: {
						jybh: '',
						jy_xm: '',
						jgdm: '',
						cpxh: '',
						productNub: '',
						wlwz: '',
						scsj: '',
						copySpeed: 0, 
						isDisplayProgress: false
					},
					deviceInforG: {
						jybh: '',
						jy_xm: '',
						jgdm: '',
						cpxh: '',
						productNub: '',
						wlwz: '',
						scsj: '',
						copySpeed: 0, 
						isDisplayProgress: false
					},
					deviceInforH: {
						jybh: '',
						jy_xm: '',
						jgdm: '',
						cpxh: '',
						productNub: '',
						wlwz: '',
						scsj: '',
						copySpeed: 0, 
						isDisplayProgress: false
					},
					deviceInforI: {
						jybh: '',
						jy_xm: '',
						jgdm: '',
						cpxh: '',
						productNub: '',
						wlwz: '',
						scsj: '',
						copySpeed: 0, 
						isDisplayProgress: false
					},
					deviceInforJ: {
						jybh: '',
						jy_xm: '',
						jgdm: '',
						cpxh: '',
						productNub: '',
						wlwz: '',
						scsj: '',
						copySpeed: 0, 
						isDisplayProgress: false
					},
					deviceInforK: {
						jybh: '',
						jy_xm: '',
						jgdm: '',
						cpxh: '',
						productNub: '',
						wlwz: '',
						scsj: '',
						copySpeed: 0, 
						isDisplayProgress: false
					},
					localStorageRadio: "存储本机",
					localStorageStr: "",
					chart: null,
					siteDialogVisible: false,
					hardDiskDialog: false,
					zfjly: null,
					copyFile: null,
					hardDisk: null,
					manager: null,
					diskTotal: "",
					diskfreeTotal:"",
					diskUseTotal: "",
					usePercentage: "",
					seriesdata:[
						{value:500, name:'未使用'},
						{value:100, name:'已用'},
					],
					Cloudser: false,
					autoClearFile: false,
					pinCode: '',
					serialNumb: '',
					adminPassword: "",
					cleanZfjlyFile: false,
					fileType: false,
					videoThumbnail: false,
					hardDiskList: [],
					saveFilepath: "C",
					selectFilepath: null
				}
			},
			created () {
				this.zfjly = new ZFJLY()
				this.hardDisk = new HardDisk ()
				this.copyFile = new COPYFILE ()
				this.manager = new Manager()
				this.manager.connect()
			},
			mounted() {
				this._initChart()
				this._Init()
				let that = this
				this._resizeHanlder = () =>{
					setTimeout(function(){
						that.chart.resize()
					},200)
					
				}
				window.addEventListener('resize', this._resizeHanlder)
			},
			beforeDestroy() {
				if (!this.chart) {
					return
				}
				window.removeEventListener('resize', this._resizeHanlder)
				this.chart.dispose()
				this.chart = null
			},
			methods: {
				_Init () {
					let that = this
					//读取配置文件
					this.copyFile.ReadJson("./sysConfig.json").then(res =>{
						let result = res 
						this.copyFile.saveFilePath = res.localStorageStr
						console.log("res::",res)
						this.localStorageRadio = res.localStorageRadio
						this.localStorageStr = res.localStorageStr
						this.Cloudser = res.Cloudser
						this.autoClearFile = res.autoClearFile
						this.pinCode = res.pinCode
						this.serialNumb = res.serialNumb
						this.adminPassword = res.adminPassword
						this.cleanZfjlyFile = res.cleanZfjlyFile
						this.fileType = res.fileType
						this.videoThumbnail = res.videoThumbnail
					}).catch(err =>{
						console.log(err)
					})
					//定时连接执法记录仪设备
					setInterval(function(){
						//连接执法记录仪设备
						that.zfjly.ConnectZFJLY()
						//获取执法记录仪信息
						that.zfjly.GetZFYInfo(function(userInfor){
							that._setInterval(userInfor) 
						})
						// 获取E盘的容量
						that.hardDisk.GetDiskFreeSpaceExW("E", function(res){
								that.diskTotal= res.diskTotal
								that.diskfreeTotal= res.diskfreeTotal
								that.diskUseTotal= (parseFloat(res.diskTotal) - parseFloat(res.diskfreeTotal)).toFixed(3)
								that.usePercentage =((parseFloat(that.diskUseTotal)/parseFloat(that.diskTotal))*100).toFixed(3)+"%"
								that.seriesdata[0].value =parseFloat(that.diskfreeTotal)
								that.seriesdata[1].value =parseFloat(that.diskUseTotal)
								that._setOptions()
						})

					},10)
					// that.zfjly.ConnectZFJLY()
					// that.zfjly.GetZFYInfo(function(userInfor){
					// 	console.log("userInfor::", userInfor)
					// 	// that._setInterval(userInfor) 
					// })
				},
				_setInterval (param) {
					let that = this
					let _zfjlyInfo = {
						"jy_xm": param.userName,
						"jybh": param.userNo,
						"cpxh": param.cSerial,
						"jgdm": param.unitNo,
						"dwmc": param.unitName,
					}
					setInterval(function(){
						that.hardDisk.InitHardDisk(function(disk){
							/*获取可移动磁盘*/
							console.log("新增可移动::",disk)
							var str = disk + "://FILE//100RECOR//"
							var filePath = path.resolve(str)
							
							that.copyFile.InitCopyFile(filePath,function(params){
								let data = Object.assign({}, _zfjlyInfo, params)
								let _isDisplayProgress = data.copyFileCount === 0 ? false : true
									that["deviceInfor"+disk] ={
										jybh: data.jybh,
										jy_xm: data.jy_xm,
										jgdm: data.jgdm,
										cpxh: data.cpxh,
										productNub: data.productNub,
										wlwz: data.wlwz,
										scsj: (new Date(data.scsj)).toLocaleString(),
										copySpeed: data.copySpeed,
										isDisplayProgress: _isDisplayProgress
									}
								that.manager.insert("MEDIAS", data, res => {
									console.log(res)
									
								})
							})
						}, 
						function (disk) {
							/*获取本地磁盘*/
							console.log("新增本地磁盘::",disk)
							
							that.hardDisk.GetDiskFreeSpaceExW(disk, function(res){
							    let obj = {
									driveLetter: disk,
									totalCapacity: res.diskTotal + "G",
									remainSpace: res.diskfreeTotal + "G",
									usedSpace: (parseFloat(res.diskTotal) - parseFloat(res.diskfreeTotal)).toFixed(2) + "G",
									usage: ((parseFloat(res.diskTotal) - parseFloat(res.diskfreeTotal))*100/parseFloat(res.diskTotal)).toFixed(2) + "%"
								}
								that.hardDiskList.push(obj)
							})
						},
						function (disk) {
							/*获取移动磁盘减少*/
							console.log("减少::",disk)
							that["deviceInfor" + disk ] ={
										jybh: '',
										jy_xm: '',
										jgdm: '',
										cpxh: '',
										productNub: '',
										wlwz: '',
										scsj: '',
										copySpeed: 0,
										isDisplayProgress: false
							}
						})
					},15)
				},
				_initChart () {
					this.chart = echarts.init(document.getElementById('memory-pie'));
					// 指定图表的配置项和数据
					
					// 使用刚指定的配置项和数据显示图表。
					this._setOptions();
				},
				_setOptions() {
					let option = {
							tooltip : {
								trigger: 'item',
								formatter: function(params){
									return params.data.name +":" +params.data.value + "G"
								}
							},
							series : [
								{
									name: '访问来源',
									type: 'pie',
									radius : '80%',
									center: ['50%', '50%'],
									color:['#67C23A','#409EFF'],
									data: this.seriesdata,
									itemStyle: {
										emphasis: {
											shadowBlur: 10,
											shadowOffsetX: 0,
											shadowColor: 'rgba(0, 0, 0, 0.5)'
										}
									},
									label: {
										normal: {
											show: false,
											position: 'center'
										}
									},
									labelLine: {
										normal: {
											show: false
										}
									},
								}
							]
						};
					this.chart.setOption(option);
				},
				setBtn () {
					this.siteDialogVisible = true
					this.manager.find("MEDIAS",{}, {}, function(res){
						console.log(res)
					})

				},
				dropBtn () {
				
				},
				handleClose () {
					this.siteDialogVisible = false
				},
				siteDialogBtnOK () {
					let result = {
						localStorageRadio: this.localStorageRadio,
						localStorageStr: this.localStorageStr,
						Cloudser: this.Cloudser,
						autoClearFile: this.autoClearFile,
						pinCode: this.pinCode,
						serialNumb: this.serialNumb,
						adminPassword: this.adminPassword,
						cleanZfjlyFile: this.cleanZfjlyFile,
						fileType: this.fileType,
						videoThumbnail: this.videoThumbnail
					}
					//写入sysConfig.json
					this.copyFile.OutputJson("./sysConfig.json", result)
					
				},
				hardDiskBtn () {
					this.localStorageStr = this.selectFilepath + "://test2"
					this.hardDiskDialog = false
				},
				hardDiskClose () {
					this.hardDiskDialog = false
				},
				openFile () {
					let that = this
					let result = this.hardDiskList.find(currentValue => {
						return currentValue.driveLetter = this.saveFilepath
					})
					this.hardDiskDialog = true
					if(this.hardDiskDialog){
						//判断hardDiskTable是否在页面已经生成
						if(!this.$refs.hardDiskTable){
							setTimeout(function(){
								that.$refs.hardDiskTable.setCurrentRow(result)
							},200)
						}else{
							that.$refs.hardDiskTable.setCurrentRow(result)
						}
					}
				},
				hardDiskCurrentChange (currentRow, oldCurrentRow) {
					this.selectFilepath = currentRow.driveLetter
				}
			},
		})
	</script>
</body>

</html>